<template>
    <!-- 搜索条件 -->
    <div class="user-select">
        <el-form label-width="80px">
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="设备信息">
                        <el-select v-model="dervice_id" filterable placeholder="请选择设备信息" clearable>
                            <el-option
                                v-for="item in account_list"
                                :key="item.id"
                                :label="item.name + ' - ' + item.id"
                                :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="所属应用">
                        <el-select v-model="form.args" filterable placeholder="请选择所属应用" clearable>
                            <el-option
                                v-for="(item,index) in app_lists"
                                :key="index"
                                :label="item"
                                :value="item"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="搜索值">
                        <el-input v-model="form.keys" />
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="时间范围">
                        <el-date-picker
                            v-model="form.search_times"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            type="daterange"
                            start-placeholder="开始"
                            end-placeholder="结束"/>
                    </el-form-item>
                </el-col>
                <el-col :span="1">
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
export default{
    // 变量检测
    watch:{
        // 用户所选设备变更
        dervice_id(){
            this.form.dervice_id = this.dervice_id
            this.appGetAll()
        },
    },
    data(){
        return {
            dervice_id:"",
            form:{},
            account_list:[],
            app_lists:[],
            app_cache:{},
        }
    },
    // 页面挂载完成后触发的事件
    mounted(){
        this.initData()
    },
    methods:{
        // 获取数据函数
        initData(){
            var that = this
            that.account_list = []
            that.types = null
            that.$axios.get('api:dervice.list').then(res=>{
                that.account_list = res.data
            })
        },
        // 搜索事件
        onSubmit(){
            if(!this.form.dervice_id){
                this.$func.notify("请先选择设备再行搜索")
                return
            }
            this.$emit("search",JSON.parse(JSON.stringify(this.form)))
        },
        // 获取该设备下的所有APP列表
        appGetAll(){
            var that = this
            that.form.args = ""
            if(that.app_cache[that.dervice_id]){
                that.app_lists = that.app_cache[that.dervice_id]
            }
            that.$axios.get("api:dervice.app.list",{params:{
                dervice_id: that.dervice_id
            }})
            .then(res=>{
                that.app_lists = res.data
                that.app_cache[that.dervice_id] = res.data
            })
        },
    },
}
</script>